<!-- 权限管理 -->
<div class="search">
  <nz-input-group nzSuffixIcon="anticon anticon-search" style="width:70%;">
    <input type="text" nz-input placeholder="输入角色名称查询" [(ngModel)]="name" (keyup.enter)="searchData()">
  </nz-input-group>
  <a (click)="searchData()">查询</a>
  <a (click)="add()">新增</a>
</div>

<nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzLoading]="loading" [nzTotal]="total" [nzShowTotal]="totalTemplate"
  [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData()"
  [nzScroll]="{ x:'1300px',y: '600px' }">
  <thead>
    <tr>
      <th nzWidth="80px" nzLeft="0px">序号</th>
      <th nzWidth="100px">角色名称</th>
      <th nzWidth="150px">是否内置角色</th>
      <th nzWidth="150px">更新时间</th>
      <th nzWidth="150px" nzRight="0px">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;index as i">
      <td nzLeft="0px">{{i+1}}</td>
      <td>{{data.name}}</td>
      <td>{{data.isInternal}}</td>
      <td>{{data.updateTime | date:"yyyy/MM/dd HH:mm"}}</td>
      <td nzRight="0px">
        <a (click)="edit(data._id)">修改</a>
        <a (click)="delete(data._id)">删除</a>
        <a (click)="author(data._id)">授权</a>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  共 {{total}} 条
</ng-template>

<nz-modal [(nzVisible)]="isVisible" nzTitle="角色详情" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWrapClassName="vertical-center-modal" nzWidth="800" [nzMaskClosable]="false">
  <div style="margin-bottom: 16px;">
    <p>角色名称：
      <input type="text" nz-input [(ngModel)]="doc.name" style="width:300px">
    </p>
    <p>是否内置角色：
      <nz-radio-group [(ngModel)]="doc.isInternal">
        <label nz-radio nzValue="true">是</label>
        <label nz-radio nzValue="false">否</label>
      </nz-radio-group>
    </p>
  </div>
</nz-modal>

<nz-modal [(nzVisible)]="isAuthor" nzTitle="权限详情" (nzOnCancel)="authorCancel()" (nzOnOk)="authorOk()" nzWrapClassName="vertical-center-modal" nzWidth="800" [nzMaskClosable]="false">
  <div class="scrollbar">
    <nz-table #nzTable [nzData]="data">
      <thead>
        <tr>
          <th></th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
          <ng-template ngFor let-item [ngForOf]="expandDataCache[data.key]">
            <tr *ngIf="(item.father&&item.father.expand)||!(item.father)">
              <td nzShowCheckbox [(nzChecked)]="item.select" [nzDisabled]="item.disabled" (nzCheckedChange)="refreshStatus(item)"></td>
              <td [nzIndentSize]="item.level*16" [nzShowExpand]="!!(item.childs.length>0)" [(nzExpand)]="item.expand"
                (nzExpandChange)="collapse(expandDataCache[data.key],item,$event)">
                {{item.name}}
              </td>
            </tr>
          </ng-template>
        </ng-template>
      </tbody>
    </nz-table>
  </div>
</nz-modal>
